<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 商品详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            scroll-padding-bottom: 60px;
        }

        .header {
            background-color: #4CAF50;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        .content {
            flex: 1;
            padding-bottom: 80px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem;
        }

        .product-detail {
            background-color: #fff;
            padding: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .sold-out {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #e74c3c;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            z-index: 10;
        }

        .product-image {
            width: 100%;
            height: auto;
            margin-bottom: 1rem;
        }

        .product-title {
            margin-bottom: 1rem;
        }

        .product-description {
            color: #666;
            margin-bottom: 1rem;
        }

        .product-price {
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 1rem;
        }

        .product-info {
            margin-bottom: 1rem;
        }

        .product-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .product-info-label {
            color: #999;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
            position: sticky;
            bottom: 80px;
            background-color: white;
            padding: 1rem;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }

        .btn {
            flex: 1;
            padding: 0.75rem;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }

        .btn-primary:hover {
            background-color: #3e8e41;
        }

        .btn-secondary {
            background-color: #f1f1f1;
            color: #333;
            border: 1px solid #ddd;
        }

        .btn-secondary:hover {
            background-color: #e1e1e1;
        }

        .btn-favorite {
            background-color: #ff9800;
            color: white;
        }

        .btn-favorite:hover {
            background-color: #e68a00;
        }

        .btn-favorite.active {
            background-color: #f44336;
        }

        .nav-bar {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            padding: 0.5rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin: 0 auto;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 12px 12px 0 0;
            z-index: 102;
        }

        .nav-bar a {
            color: var(--sub-text);
            text-decoration: none;
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.8rem;
            transition: color 0.3s;
            position: relative;
        }

        .nav-bar a.active {
            color: var(--primary-color);
        }

        .nav-bar a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px;
        }

        .nav-icon {
            width: 24px;
            height: 24px;
            position: relative;
            margin-bottom: 0.2rem;
        }

        .home-icon::before {
            content: "🏠";
        }

        .products-icon::before {
            content: "📦";
        }

        .publish-icon::before {
            content: "✏️";
        }

        .news-icon::before {
            content: "💬";
        }

        .account-icon::before {
            content: "👤";
        }
    </style>
</head>

<body>
    <header class="header">
        <h1>校园二手市场</h1>
    </header>

    <div class="content">
        <main class="container">
            <section class="product-detail">
                <img id="product-image" class="product-image" src="" alt="商品图片">
                <h2 id="product-title" class="product-title"></h2>
                <p id="product-description" class="product-description"></p>
                <p id="product-price" class="product-price"></p>

                <div class="product-info">
                    <div class="product-info-item">
                        <span class="product-info-label">分类:</span>
                        <span id="product-category"></span>
                    </div>
                    <div class="product-info-item">
                        <span class="product-info-label">卖家:</span>
                        <span id="product-seller"></span>
                    </div>
                    <div class="product-info-item">
                        <span class="product-info-label">发布日期:</span>
                        <span id="product-date"></span>
                    </div>
                </div>
            </section>

            <div class="action-buttons">
                <button id="buy-btn" class="btn btn-primary">立即购买</button>
                <button id="favorite-btn" class="btn btn-favorite">
                    <span id="favorite-text">收藏</span>
                </button>
            </div>
        </main>
    </div>

    <nav class="nav-bar">
        <a href="index.html">
            <div class="nav-icon home-icon"></div>
            首页
        </a>
        <a href="products.html" class="active">
            <div class="nav-icon products-icon"></div>
            商品
        </a>
        <a href="publish.html">
            <div class="nav-icon publish-icon"></div>
            发布
        </a>
        <a href="news.html">
            <div class="nav-icon news-icon"></div>
            消息
        </a>
        <a href="account.html">
            <div class="nav-icon account-icon"></div>
            我的
        </a>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (!currentUser) {
                window.location.href = 'login.html';
            }

            const urlParams = new URLSearchParams(window.location.search);
            const productId = urlParams.get('id');

            function getProducts() {
                let products = JSON.parse(localStorage.getItem('products'));
                if (!products || products.length === 0) {
                    products = [
                        { id: 1, title: '全新未拆封考研英语真题', description: '全新未拆封2023考研英语真题详解，包含近10年真题及详细解析。', price: 35, image: '图片/全新未拆封考研英语真题.jpg', category: '书籍', date: '2023-05-10', userId: 1, userName: '张同学' },
                        { id: 2, title: '九成新自行车', description: '九成新自行车，适合校园内使用。', price: 150, image: '图片/自行车.jpg', category: '交通工具', date: '2023-05-12', userId: 2, userName: '李同学' },
                        { id: 3, title: '电子书阅读器', description: '电子书阅读器，几乎全新，附带保护套。', price: 200, image: '图片/电子阅读器.jpg', category: '电子产品', date: '2023-05-15', userId: 3, userName: '王同学' },
                        { id: 4, title: '宿舍用小冰箱', description: '宿舍用小冰箱，功能正常，适合存放饮料和零食。', price: 100, image: '图片/宿舍小冰箱.jpg', category: '家电', date: '2023-05-18', userId: 1, userName: '张同学' },
                        { id: 5, title: '宿舍用台灯', description: '宿舍用台灯，可调节亮度。', price: 30, image: '图片/宿舍用台灯.jpg', category: '生活', date: '2023-05-20', userId: 4, userName: '赵同学' },
                        { id: 6, title: '无线耳机', description: '无线蓝牙耳机，音质清晰，适合学习和娱乐。', price: 120, image: '图片/无线耳机.jpg', category: '电子产品', date: '2023-05-22', userId: 2, userName: '李同学' },
                        { id: 7, title: '折叠桌椅', description: '便携式折叠桌椅，适合户外活动和宿舍使用。', price: 80, image: '图片/折叠桌椅.jpg', category: '生活', date: '2023-05-25', userId: 5, userName: '刘同学' },
                        { id: 8, title: '背包', description: '多功能背包，适合日常使用和旅行。', price: 60, image: '图片/背包.jpg', category: '生活', date: '2023-05-28', userId: 3, userName: '王同学' },
                        { id: 9, title: '篮球', description: '标准篮球，适合校园篮球比赛和训练。', price: 45, image: '图片/篮球.jpg', category: '交通工具', date: '2023-06-01', userId: 4, userName: '赵同学' },
                        { id: 10, title: '笔记本电脑', description: '高性能笔记本电脑，适合学习和编程。', price: 2500, image: '图片/笔记本电脑.jpg', category: '电子产品', date: '2023-06-03', userId: 1, userName: '张同学' },
                        { id: 11, title: '智能手表', description: '智能手表，支持健康监测和通知提醒。', price: 180, image: '图片/智能手表.jpg', category: '电子产品', date: '2023-06-05', userId: 5, userName: '刘同学' },
                        { id: 12, title: '滑板', description: '初学者滑板，适合校园内短途出行。', price: 90, image: '图片/滑板.jpg', category: '交通工具', date: '2023-06-08', userId: 2, userName: '李同学' },
                        { id: 13, title: '水壶', description: '不锈钢水壶，保温效果好，适合日常使用。', price: 25, image: '图片/水壶.jpg', category: '生活', date: '2023-06-10', userId: 3, userName: '王同学' },
                        { id: 14, title: '绘画工具', description: '专业绘画工具，适合艺术学习和创作。', price: 75, image: '图片/绘画工具.jpg', category: '书籍', date: '2023-06-12', userId: 4, userName: '赵同学' },
                        { id: 15, title: '耳机支架', description: '耳机支架，帮助整理桌面空间。', price: 15, image: '图片/耳机支架.jpg', category: '生活', date: '2023-06-15', userId: 5, userName: '刘同学' }
                    ];
                    localStorage.setItem('products', JSON.stringify(products));
                }
                return products;
            }

            function getPurchases() {
                const purchases = JSON.parse(localStorage.getItem('purchases')) || {};
                return purchases[currentUser.id] || [];
            }

            function isPurchased(productId) {
                const purchases = getPurchases();
                return purchases.some(p => p.productId === parseInt(productId));
            }

            function formatDate(dateString) {
                const date = new Date(dateString);
                return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
            }

            const products = getProducts();
            const product = products.find(p => p.id === parseInt(productId));

            if (product) {
                document.getElementById('product-image').src = product.image;
                document.getElementById('product-title').textContent = product.title;
                document.getElementById('product-description').textContent = product.description;
                document.getElementById('product-price').textContent = `价格: ¥${product.price}`;
                document.getElementById('product-category').textContent = product.category;
                document.getElementById('product-seller').textContent = product.userName;
                document.getElementById('product-date').textContent = formatDate(product.date);

                if (isPurchased(productId)) {
                    const soldOut = document.createElement('div');
                    soldOut.className = 'sold-out';
                    soldOut.textContent = '已购买';
                    document.querySelector('.product-detail').prepend(soldOut);
                    
                    document.getElementById('buy-btn').disabled = true;
                    document.getElementById('buy-btn').textContent = '已购买';
                    document.getElementById('buy-btn').style.backgroundColor = '#95a5a6';
                }
            } else {
                document.querySelector('.product-detail').innerHTML = '<p>商品未找到</p>';
            }

            const favoriteBtn = document.getElementById('favorite-btn');
            const favoriteText = document.getElementById('favorite-text');

            function getFavorites() {
                const favorites = localStorage.getItem('favorites');
                return favorites ? JSON.parse(favorites) : [];
            }

            function isFavorited(productId) {
                const favorites = getFavorites();
                return favorites.includes(parseInt(productId));
            }

            function updateFavoriteButton() {
                if (isFavorited(productId)) {
                    favoriteBtn.classList.add('active');
                    favoriteText.textContent = '已收藏';
                } else {
                    favoriteBtn.classList.remove('active');
                    favoriteText.textContent = '收藏';
                }
            }

            updateFavoriteButton();

            favoriteBtn.addEventListener('click', function () {
                const favorites = getFavorites();
                const index = favorites.indexOf(parseInt(productId));

                if (index === -1) {
                    favorites.push(parseInt(productId));
                    favoriteText.textContent = '已收藏';
                    favoriteBtn.classList.add('active');
                    alert('已添加到收藏夹！');
                } else {
                    favorites.splice(index, 1);
                    favoriteText.textContent = '收藏';
                    favoriteBtn.classList.remove('active');
                    alert('已从收藏夹移除！');
                }

                localStorage.setItem('favorites', JSON.stringify(favorites));
            });

            document.getElementById('buy-btn').addEventListener('click', function () {
                if (product.userId === currentUser.id) {
                    alert('不能购买自己发布的商品！');
                    return;
                }

                if (confirm(`确认购买 ${product.title} 吗？`)) {
                    let purchases = getPurchases();
                    
                    if (purchases.some(p => p.productId === parseInt(productId))) {
                        alert('您已经购买过该商品！');
                        return;
                    }
                    
                    purchases.push({
                        productId: parseInt(productId),
                        date: new Date().toISOString(),
                        sellerId: product.userId
                    });
                    
                    const allPurchases = JSON.parse(localStorage.getItem('purchases')) || {};
                    allPurchases[currentUser.id] = purchases;
                    localStorage.setItem('purchases', JSON.stringify(allPurchases));
                    
                    alert('购买成功！请等待卖家联系您进行交易。');
                    
                    document.getElementById('buy-btn').disabled = true;
                    document.getElementById('buy-btn').textContent = '已购买';
                    document.getElementById('buy-btn').style.backgroundColor = '#95a5a6';
                    
                    const soldOut = document.createElement('div');
                    soldOut.className = 'sold-out';
                    soldOut.textContent = '已购买';
                    document.querySelector('.product-detail').prepend(soldOut);
                }
            });
        });
    </script>
</body>
</html>